import {Image, Text, View} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './memberCard.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import 'taro-ui/dist/style/components/icon.scss';
import noMemberBg from '@/assets/image/index/memberCard/noMember_bg.png';
import lanjingBg from '@/assets/image/index/memberCard/lanjing_bg.png';
import chijingBg from '@/assets/image/index/memberCard/chijing_bg.png';
import shuangchongBg from '@/assets/image/index/memberCard/shuangchong_bg.png';
import lanjingLogo from '@/assets/image/index/memberCard/noMember_logo.png';
import chijingLogo from '@/assets/image/index/memberCard/chijing_logo.png';
import shuangchongLogo from '@/assets/image/index/memberCard/shuangchong_logo.png';
import lanjingCardLogo from '@/assets/image/index/memberCard/lanjingCardLogo.png';
import chijingCardLogo from '@/assets/image/index/memberCard/chijingCardLogo.png';
import shuangchongCardLogo from '@/assets/image/index/memberCard/shuangchongCardLogo.png';
import rightIcon from '@/assets/image/indexPage/right.png';

type INoticeProps = T.IProps & T.INoticeProps;
//@ts-ignore
@connect<Partial<INoticeProps>, T.INoticeState>(store2Props, actions)
export default class Info extends Component<Partial<INoticeProps>, T.INoticeState> {
  constructor(props: INoticeProps) {
    super(props);
    this.state = {};
  }

  render() {
    let {
      actions: {action},
      main: {memberCardType, memberInfo, showDayLotteryButton},
    } = this.props;
    const memberCard: Record<
      typeof memberCardType,
      {width?: string; rightLogo?: string; cardLogo?: string; bg: string; cardId: string; name?: string}
    > = {
      lanjing: {
        bg: lanjingBg,
        width: '178rpx',
        rightLogo: lanjingLogo,
        cardId: memberInfo?.aquamarineMembershipCardNumber,
        cardLogo: lanjingCardLogo,
        name: '蓝晶会员',
      },
      chijing: {
        bg: chijingBg,
        width: '182rpx',
        rightLogo: chijingLogo,
        cardId: memberInfo?.crystalMembershipCardNumber,
        cardLogo: chijingCardLogo,
        name: '赤晶会员',
      },
      shuangchong: {
        bg: shuangchongBg,
        width: '250rpx',
        rightLogo: shuangchongLogo,
        cardId: memberInfo?.dualMembershipCardNumber,
        cardLogo: shuangchongCardLogo,
        name: '双重会员',
      },
      noMember: {bg: noMemberBg, cardId: ''},
    };
    const currentMember = memberCard[memberCardType];
    return (
      <View>
        {memberCardType === 'noMember' && (
          <View
            className={`PageIndexNotice PageIndexNotice-${memberCardType}`}
            style={{backgroundImage: `url("${currentMember.bg}")`, marginBottom: '55rpx'}}
          >
            <Text className="moreText">欢迎回家</Text>
            <View style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
              <View className="noMemberText" style={{flexDirection: 'row', alignItems: 'center', zIndex: 3}}>
                开通会员享特权 多用多省 少用不亏
                <Text
                  className="noMemberText-openCard"
                  onClick={() => {
                    Taro.navigateTo({
                      url: '/pages/package-A/memberOpen/index',
                    });
                  }}
                >
                  立即开通
                </Text>
                <Image src={rightIcon} className="noMemberText-right" />
              </View>
            </View>
            <View style={{display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', marginTop: '16rpx'}}>
              <View
                className="footerBtn"
                style={{marginRight: '24rpx'}}
                onClick={() => {
                  if (Taro.getStorageSync('blacklistModel')) {
                    action.commonChange('main.blacklistModel', true);
                    return;
                  }
                  Taro.navigateTo({
                    url: '/pages/package-C/points-mall/index',
                  });
                }}
              >
                每日签到
              </View>
              {showDayLotteryButton && (
                <View
                  className="footerBtn"
                  onClick={() => {
                    if (Taro.getStorageSync('blacklistModel')) {
                      action.commonChange('main.blacklistModel', true);
                      return;
                    }
                    Taro.navigateTo({
                      url: '/pages/package-C/rouletteGame/index',
                    });
                  }}
                >
                  每日抽奖
                </View>
              )}
            </View>
          </View>
        )}
        {memberCardType !== 'noMember' && (
          <View
            className={`PageIndexNotice PageIndexNotice-${memberCardType}`}
            style={{backgroundImage: `url("${currentMember.bg}")`}}
          >
            <Image src={currentMember.rightLogo} className="memberLogo" />
            <Text className="moreText" style={{marginBottom: '0px'}}>
              {currentMember.cardId}
            </Text>
            {currentMember.cardLogo && (
              <Image
                style={{height: '66rpx', marginBottom: '14rpx', width: currentMember.width}}
                src={currentMember.cardLogo}
              />
            )}
            <Text className="moreText">欢迎回家</Text>
            <Text className="noMemberText">
              您已成为会员<Text className="cardNumber"> {memberInfo.memberDays} </Text>天，已为您节省
              <Text className="cardNumber"> {memberInfo.saveMoney || '0'} </Text>元，
            </Text>
            <Text className="moreText">有效期至：{memberInfo.endTime}</Text>
            <View style={{display: 'flex', flexDirection: 'row', justifyContent: 'flex-end'}}>
              <View
                className="footerBtn"
                style={{marginRight: '24rpx'}}
                onClick={() => {
                  if (Taro.getStorageSync('blacklistModel')) {
                    action.commonChange('main.blacklistModel', true);
                    return;
                  }
                  Taro.navigateTo({
                    url: '/pages/package-C/points-mall/index',
                  });
                }}
              >
                每日签到
              </View>
              {showDayLotteryButton && (
                <View
                  className="footerBtn"
                  onClick={() => {
                    if (Taro.getStorageSync('blacklistModel')) {
                      action.commonChange('main.blacklistModel', true);
                      return;
                    }
                    Taro.navigateTo({
                      url: '/pages/package-C/rouletteGame/index',
                    });
                  }}
                >
                  每日抽奖
                </View>
              )}
            </View>
          </View>
        )}
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
